<template>
 <el-main>
  <div class="menmuTitle">
   <h1 @click="goBack"><i class="el-icon-back"></i> {{ $t('user.assets.go') }}</h1>

   <el-select v-model="ruleForm.data.coinsCode" @change="onCoin" :placeholder="$t('common.tips.t9')">
    <el-option
     v-for="item in tabs"
     :key="item.id"
     :label="item.coin"
     :value="item.id">
    </el-option>
   </el-select>

   <el-select v-model="ruleForm.data.type" @change="onType" :placeholder="$t('common.tips.t9')">
    <el-option
     v-for="item in options"
     :key="item.id"
     :label="item.name"
     :value="item.id">
    </el-option>
   </el-select>
  </div>

  <div class="box">
   <div class="table" v-if="list.length > 0">
    <el-table :data="list" height="400">
     <el-table-column prop="time" :label="$t('user.assets.t18')" width="160" align="center"></el-table-column>
     <el-table-column prop="coinsCode" :label="$t('user.assets.t19')" width="100" align="center"></el-table-column>
     <el-table-column prop="payBalance" width="150" :label="$t('user.assets.t20')" align="center"></el-table-column>
     <el-table-column prop="typeId" :label="$t('user.assets.t21')" align="center"></el-table-column>
     <el-table-column prop="state" :label="$t('user.assets.t22')" width="100" align="center">
      <template slot-scope="scope">
       <p :class="scope.row.state === 1 ? 'success' : scope.row.state === 2 ? 'fail' : 'complete'">
        {{ scope.row.state === 1 ? $t('common.success.t11') : scope.row.state === 2 ? $t('common.error.t18') : $t('common.success.t10') }}
       </p>
      </template>
     </el-table-column>
    </el-table>

    <pagination :total="total" :pageSize="ruleForm.cmp.pageSize" @pageTotal="pageTotal" :count="9" @pageNum="pageNum" :margin="40"></pagination>
   </div>
   <div class="empty" v-else>No Data…</div>
  </div>
 </el-main>
</template>

<script>
import Pagination from "@/components/Pagination/Pagination";  // 分页

export default {
 name: "userAssetsList",
 data () {
  return {
   tabs: [],

   options: [],

   list: [],
   total: 0,

   ruleForm: {
    data: {
     coinsCode: '',
     type: 1,
    },
    cmp: {
     pageIndex: 1,
     pageSize: 10
    },
   }
  }
 },
 components: {
  Pagination
 },
 created() {
  this.coinList()

  this.onOpera()
 },
 methods: {
  // 获取操作状态
  onOpera() {
   const typeList = [this.$t('user.assets.t7'),this.$t('user.assets.t8'),this.$t('user.assets.t9'),this.$t('user.assets.t10')]

   this.options = [];
   typeList.forEach((item, index) => {
    this.options.push({
     name: item,
     id: index + 1
    })
   });
  },

  // 初始数据
  tabList() {
   this.$post(this.$address.assetsList, this.ruleForm).then(res => {
    res.data.forEach(item => {
     switch (parseInt(item.typeId)) {
      case 1:
       item.typeId = this.$t('user.assets.t11')
       break;
      case 2:
       item.typeId = this.$t('user.assets.t12')
       break;
      case 3:
       item.typeId = this.$t('user.assets.t13')
       break;
      case 4:
       item.typeId = this.$t('user.assets.t14')
       break;
      case 5:
       item.typeId = this.$t('user.assets.t15')
       break;
     }
    })
    this.list = res.data
    if (this.ruleForm.cmp.pageIndex === 1) {
     this.total = Math.ceil(res.total / this.ruleForm.cmp.pageSize)
    }
   })
  },

  // 获取币种列表
  coinList () {
   this.$post(this.$address.coinList).then(res => {
    res.data.forEach(item => {
     item.id = item.coin
     this.tabs.push(item)
    })
    this.ruleForm.data.coinsCode = res.data[0].coin

    this.tabList()
   })
  },

  // 返回上一页
  goBack () {
   this.$router.go(-1)
  },

  // 切换页面条数
  pageTotal(e) {
   this.ruleForm.cmp.pageSize = e;
   this.ruleForm.cmp.pageIndex = 1;
   this.tabList()
  },
  // 跳转
  pageNum(e) {
   this.ruleForm.cmp.pageIndex = e;
   this.tabList()
  },

  // 选择状态
  onType () {
   this.tabList()
  },

  // 选择币种
  onCoin () {
   this.tabList()
  }
 },
 watch: {
  '$i18n.locale'(a, b) {
   this.onOpera()
  },
 }
}
</script>

<style scoped lang="scss">
.el-main {
 .menmuTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;

  h1 {
   font-size: 20px;
   font-weight: bold;
   color: #002445;
   position: relative;
   padding-bottom: 10px;
   cursor: pointer;
   margin-right: auto;

   i {
    font-weight: bold;
    color: #000;
    margin-right: 15px;
   }

   &:after {
    display: block;
    content: "";
    width: 140px;
    height: 2px;
    background: #0d4fa5;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 4px;
   }
  }

  .el-select {
   max-width: 170px;
   &:nth-of-type(1) {
    margin-right: 20px;
   }

   /deep/ .el-input {
    .el-input__inner {
     color: #002445;
     background-color: #f5faff;
     font-weight: bold;
    }
   }
  }
 }

 .el-table {
  margin-top: 20px;
 }

 .box {
  display: flex;
  flex-direction: column;
  height: 1%;
  flex: 1 1 auto;

  .empty {
   margin: auto;
   text-align: center;
   color: #b3bdc7;
   font-size: 20px;

   &:before {
    content: "";
    display: block;
    width: 130px;
    height: 130px;
    background: url('../../../../assets/empty.png');
    background-size: 100% 100%;
    position: relative;
    margin: 0 auto 10px;
    left: 10px;
    opacity: .6;
   }
  }
 }
}
</style>
